<template>
	<div id="contentBox">
		<div class="searchBox">
			<el-form :inline="true"  ref="searchForm"  :model="searchForm" label-width="96px" >
				<el-form-item label="手机号码" prop="username" style="    margin-bottom: 0;" >
				    <el-input type="tel" v-model="searchForm.username" placeholder="请输入搜索内容..." @input.native="debounceSeach" ></el-input >
				</el-form-item>
				<el-form-item label="真实姓名" prop="realname" style="    margin-bottom: 0;" >
				    <el-input v-model="searchForm.realname" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input >
				</el-form-item>

	            <el-form-item label="用户类别" prop="type"  >
				      <el-select   @change="debounceSeach" v-model="searchForm.type" filterable placeholder="请选择用户类别">
					    <el-option 
					      v-for="(item,index) in userTypeArray"
					      :key="index"
					      :label="item"
					      :value="index">
					    </el-option>
					  </el-select>
				</el-form-item>

				<el-form-item label="用户角色" prop="roleName"  >
				    <el-input v-model="searchForm.roleName" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input >
				</el-form-item>
				<!-- <el-form-item label="用户角色" prop="roleName" style="    margin-bottom: 0;" >
				    <el-select v-model="searchForm.roleName" filterable placeholder="请选择用户角色">
					    <el-option
					     @change="debounceSeach"
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					      {item}   {index}
					    </el-option>
					  </el-select>
				</el-form-item> -->
				
				<el-form-item style="width:100%!important; margin-bottom: 10px;">
<!-- 				    <el-button type="primary" @click="seachData()">搜索</el-button>
 -->				    <el-button @click="resetSearchForm('searchForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="tableBox" style="margin:25px 25px 0" >
			<el-table :data="tableData.data" border  >
			    <el-table-column label="手机号" >
			      <template scope="scope">
			        <span >{{ scope.row.username }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="真实姓名" >
			      <template scope="scope">
			        <span >{{ scope.row.realname }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="用户类别" >
			      <template scope="scope">
			        <span >{{ scope.row.userTypeCH }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="用户角色" >
			      <template scope="scope"  > 
			      			 <span v-for="col in scope.row.roleList">{{ col.roleName }} 
			      			 	<template  v-if="col.roleName != '' && col.roleName != null "> 
			      			 			,
			      			 	</template> 
			      			 </span>  
			      </template>
			    </el-table-column>
			   
			    <el-table-column label="启用状态" >
			      <template scope="scope">
			        <span >{{ scope.row.enable | flagF}}</span>
			      </template>
			    </el-table-column> 
			    <el-table-column label="岗位" >
			      <template scope="scope">
			        <span >{{ scope.row.userPositionCH }}</span>
			      </template>
			    </el-table-column>

			    <el-table-column label="部门" >
			      <template scope="scope">
			        <span >{{ scope.row.departmentName }}</span>
			      </template>
			    </el-table-column>

			    <el-table-column label="备注" >
			      <template scope="scope">
			        <span >{{ scope.row.remark }}</span>
			      </template>
			    </el-table-column>
			    
			    <el-table-column label="操作" width="180">
			      <template scope="scope">
			      	
			        <el-button size="small" type="info" @click="handleEdit(scope.$index, scope.row ,true)">编辑</el-button>
			        <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row )">查看</el-button> -->
			        <el-button size="small" ref="enableInfo" :type="scope.row.enable==0?'success':'warning'" @click="handleDisable(scope.row)">{{ scope.row.enable | flag }}</el-button> 
			        <el-button size="small" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
			      </template>
			    </el-table-column>
			</el-table>
			<el-dialog  title="用户管理" :visible.sync="dialogSendData.dialogFormVisible" top="10%" v-if="dialogSendData.dialogFormVisible">
                <dialogForm :dialogSendData="dialogSendData" :tableData="tableData" v-on:refreshSeachData="seachData()"></dialogForm>
			</el-dialog>
		</div>
        <div class="block" style="text-align: center;margin-top: 15px;position:relative;">
		    <pagination v-on:refreshSeachData="seachData()"  :tableData="tableData" :searchForm="searchForm"></pagination>
		    <el-button  style="position:absolute;right:25px;top:0;" type="primary" @click="handleEdit()">添加用户</el-button>
		</div>
		
	</div>
	
</template>
<script src="./index.js"></script>
<style scoped lang="stylus">
	@import "./index.styl"
</style>